<template>
  <div class="employee-detail-container">
    <el-card shadow="never">
      <el-page-header @back="goBack" content="详情页面"></el-page-header>
    </el-card>
    <el-card shadow="never">
      <div class="employee-file-container">
        <div class="block" >
          <el-image :src="employeeArchives.base.archivesPhotoUrl"></el-image>
        </div>
        <el-descriptions :column="3" class='employee-file'>
          <el-descriptions-item  label="档案号">{{employeeArchives.base.employeeArchivesCode}}</el-descriptions-item>
          <el-descriptions-item  label="工号">{{employeeArchives.base.employeeCode}}</el-descriptions-item>
          <el-descriptions-item  label="中文名">{{employeeArchives.base.employeeName}}</el-descriptions-item>
          <el-descriptions-item  label="英文名">{{employeeArchives.base.employeeEnglishName}}</el-descriptions-item>
          <el-descriptions-item  label="雇佣性质">{{employeeArchives.base.employeeEmployType}}</el-descriptions-item>
          <el-descriptions-item  label="聘用形式">{{employeeArchives.base.employeeEmployForm}}</el-descriptions-item>
          <el-descriptions-item  label="编制类型">{{employeeArchives.base.employeeInHeadship}}</el-descriptions-item>
          <el-descriptions-item  label="是否双师">{{employeeArchives.base.employeeIsTutor}}</el-descriptions-item>
          <!-- <el-descriptions-item  label="指纹是否录入">{{employeeArchives.base.employeeIsTutor}}</el-descriptions-item> -->
        </el-descriptions>
      </div>
    </el-card>
    <el-tabs type="card" class="employee-tabs-container" shadow="never" :value="activeName" @tab-click="changetTab">
      <el-tab-pane label="详情资料" name="detail" :lazy="true">
        <archives v-if="activeName === 'detail'" :prop="employeeArchives" @change="changeArchives"></archives>
      </el-tab-pane>
      <el-tab-pane label="岗位任职"  name="holdPost" :lazy="true">
        <el-scrollbar style="height:100%">
          <holdpost v-if="activeName === 'holdPost'" :prop="tabProp"></holdpost>
        </el-scrollbar>
      </el-tab-pane>
      <el-tab-pane label="合同/协议"  name="contract" :lazy="true">
        <el-scrollbar style="height:100%">
          <contract v-if="activeName === 'contract'" :prop="tabProp"></contract>
        </el-scrollbar>
      </el-tab-pane>
      <el-tab-pane label="职称/资格证书/技能证书"  name="certificate" :lazy="true">
        <el-scrollbar style="height:100%">
          <certificate v-if="activeName === 'certificate'" :prop="tabProp"></certificate>
        </el-scrollbar>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import edit from '@/views/employee/employee/edit.vue'
import archives from '@/views/employee/employee/components/archives/archives.vue'
import holdpost from '@/views/employee/employee/components/holdPost/holdPost.vue'
import certificate from '@/views/employee/employee/components/certificate/certificate.vue'
import contract from '@/views/employee/employee/components/contract/contract.vue'
import {getEmployeeArchives} from '@/api/employee/employee/employee.js'
import {parties,nations} from '@/utils/constants/common/constants.js'
export default {
  name: "EmployeeIndex",
  dicts: [],
  components: { edit,archives,holdpost,certificate,contract},
  props:{
    prop:{
      type:Object,
      default:function(){
        return {
          employeeId:null,
          employeeCode:null,
        }
      }
    }
  },
  data() {
    return {
      open:false,
      openDetail:false,
      employeeId:this.prop.employeeId,
      activeName:'detail',
      nations:nations,
      parties:parties,
      employeeArchives:{
        base:{},
        certificates:[],
        workExperiences:[],
        foreignExperiences:[],
        educateExperiences:[],
      },
      holdPostData:[],
      tabProp:{
        employeeId:this.prop.employeeId,
        employeeCode:this.prop.employeeCode
      },
      contractData:[],
      jobTitles:[],
      certificateData:[],
      skillCertificateData:[],

    };
  },
  methods: {
    changetTab(tab){
      this.activeName = tab.name
    },
    getEmployeeArchives(){
      getEmployeeArchives({employeeId:this.employeeId}).then(res =>{
        let data = res.data
        data.base.archivesPhotoUrl = process.env.VUE_APP_BASE_API+data.base.archivesPhotoUrl
        //雇佣性质
        switch (data.base.employeeEmployType){
          case '0':
            data.base.employeeEmployType = '内聘'
            break;
          case '1':
            data.base.employeeEmployType = '外聘'
            break;
          case '2':
            data.base.employeeEmployType = '返聘'
            break;
          default:
            data.base.employeeEmployType = '外聘'
            break;
        }
        //聘用形式
        switch (data.base.employeeEmployForm){
          case '0':
            data.base.employeeEmployForm = '全职'
            break;
          case '1':
            data.base.employeeEmployForm = '兼职'
            break;
          case '2':
            data.base.employeeEmployForm = '临时'
            break;
          default:
            data.base.employeeEmployForm = '全职'
            break;
        }
        data.base.employeeInHeadship = data.base.employeeInHeadship === '0'?'非事业编制':'事业编制'
        data.base.employeeIsTutor = data.base.employeeIsTutor === '0'?'否':'是'
        data.base.employeeGender = data.base.employeeGender === '0'?'男':'女'
        data.base.employeeHeight = data.base.employeeHeight +' cm'
        data.base.employeeWeight = data.base.employeeWeight+' KG'
        //婚育状态
        switch (data.base.employeeMaritalStatus){
          case '0':
            data.base.employeeMaritalStatu = '未婚'
            break;
          case '1':
            data.base.employeeMaritalStatu = '已婚未育'
            break;
          case '2':
            data.base.employeeMaritalStatu = '已婚已育'
            break;
          default:
            data.base.employeeMaritalStatu = '未婚'
            break;
        }
        data.base.workYears = data.base.workYears+' 年'
        data.base.schoolYears = data.base.schoolYears+' 年'
        data.base.employeeNation = nations[Number.parseInt(data.base.employeeNation)].label
        data.base.employeeParty = parties[Number.parseInt(data.base.employeeParty)].label
        //婚育状态
        switch (data.base.employeeRegisteredType){
          case '0':
            data.base.employeeRegisteredType = '农村户口'
            break;
          case '1':
            data.base.employeeRegisteredType = '城镇居民户口'
            break;
          case '2':
            data.base.employeeRegisteredType = '集体户口'
            break;
          default:
            data.base.employeeRegisteredType = '城镇居民户口'
            break;
        }
        this.employeeArchives = data
      }).catch(err =>{
        console.log('查询员工档案详细资料失败，原因:',err)
      })
    },
    changeArchives(){
      this.getEmployeeArchives()
    },
    goBack(){
      this.$emit('close')
    },
    editEmployee(){
      this.$emit('close')
    },
  },
  mounted() {
    this.getEmployeeArchives()
  },
  updated() {

  },
};
</script>
<style scoped>
  >>> .employee-file-container{
    display: flex;
    flex-direction: row;
  }
  >>> .employee-file-container .block{
    width:5vw;
    margin:5px 20px 5px 0px;
  }
  >>> .employee-file-container .block .el-image{
    width:70px;
    height:88px;
  }
</style>
